<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>应用下载</title>
  <style>
    html, body {
      width: 100%;
      overflow: hidden;
      height: 100%;
      margin: 0;
    }

    .top-box {
      width: 100%;
      height: 90px;
      background-size: contain;
    }

    .img {
      background-image: url("./images/android-top-img.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      width: 100%;
      height: 100%;
    }

    .blur {
      width: 100%;
      height: 10px;
      background-color: #f0f0f0
    }

    .main-box {
      width: 100%;
      height: 550px;
    }

    .top-line {
      margin-top: 50px;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content:  center;
      align-items: center;
    }

    .logo-border {
      width: 100px;
      height: 100px;
      border: 1px solid #f0f0f0;
      padding: 10px 10px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

     .logo {
      background-image: url("./images/logo.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      width: 70%;
      height: 70%;
    }

    .text {
      text-align: center;
      margin-top: 20px;
      font-weight: 500;
    }

    .star-five{
      background-image: url("./images/star-man.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      width: 12px;
      height: 12px;
    }

    .star-five-kong{
      background-image: url("./images/star-kong.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      width: 12px;
      height: 12px;
    }

    .star-border {
      width: 100%;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .download-border {
      margin-bottom: 30px;
      width: 100%;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .button {
      margin-top: 30px;
      width: 85%;
      height: 40px;
      border: none;
      color: white;
      text-align: center;
      line-height: 40px;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px
    }

    .button2 {
      background-color: #409eff;
      border-color: #409eff;
    } /* Blue */

    .bg {
      width: 100%;
      height: 100%;
      background-color: #000000;
      position: absolute;
      opacity: 0.7;
      visibility: hidden;
    }

    .mask {
      background-image: url("./images/mask-android.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      width: 100%;
      height: 430px;
    }

    .dci {
      position: absolute;
      bottom: 5px;
      width: 100%;
      text-align: center;
      color: #cccccc;
      font-size: 10px
    }
  </style>
</head>
<body>
  <div onclick="_closeMask();" id="bg" class="bg">
    <div id="mask" class="mask"></div>
  </div>
  <!-- 顶部箭头引导 -->
  <div id="top" class="top-box">
     <div id="guide-img" class="img"/>
  </div>
  <!-- 分割线 -->
  <div id="blur" class="blur"></div>

  <!-- 下载区 -->
  <div class="main-box">
    <div class="top-line">
      <div class="logo-border">
        <div class="logo"/>
      </div>
    </div>
  </div>

  <!-- 下载文案 -->
  <div class="text">应用下载</div>

  <!-- 五星好评（伪） -->
  <div class="star-border">
    <div class="star-five"></div>
    <div class="star-five"></div>
    <div class="star-five"></div>
    <div class="star-five"></div>
    <div class="star-five-kong"></div>
  </div>

  <!-- 下载按钮 -->
  <div class="download-border">
    <button class="button button2" onclick="clickIosDownload();">IOS下载</button>
  </div>

  <div class="download-border">
    <button class="button button2" onclick="clickHuaWeiStoreDownload();">Android下载（华为商店）</button>
  </div>

  <div onclick="clickNormalStoreDownload();" class="download-border">
    <a id="normal" class="button button2" href="javascript:void(0);">Android下载（普通下载）</a>
  </div>

  <div class="dci">
    MIT Licensed | Copyright © 2020-Sirio
  </div>

</body>

<script>
   // 获取当前URL
   var urlStr = window.location.href;
   // 获取活动的IOS地址
   var iosDownloadUrl = _getRequest().iosUrl;
   // 获取活动的安卓华为商店地址
   var huaweiDownloadUrl = 'https://appgallery.huawei.com/#/app/' + _getRequest().huaweiUrl;
   // 获取活动的普通下载地址
   var normalDownloadUrl = _getRequest().normalUrl;
   // 客户端类型
   var deviceType = _judgeClient();
   // 是否是微信内置浏览器
   var browserType = _judgeBrowser();

   // 改变普通下载URL
   _changeNormalUrl();

   // 将普通下载按钮的地址替换为传入的地址
   function _changeNormalUrl() {
     if(!browserType) {
       document.getElementById("normal").href = normalDownloadUrl;
     }
   }

   // 打开IOS AppStore
   function _openIosStore() {
     if(browserType && deviceType === 'Android'){
       // 若是微信内置浏览器并且是安卓设备则弹出安卓遮罩
       document.getElementById("mask").style.backgroundImage = 'url("./images/mask-android.png")';
       document.getElementById("bg").style.visibility="visible";
     } else {
       // 否则跳转AppStore
       window.location.href = iosDownloadUrl;
     }
   }

   // 打开华为商城
   function _openHuaweiStore() {
     if(browserType && deviceType === 'Android') {
       // 若是微信内置浏览器并且是安卓设备则弹出安卓遮罩
       document.getElementById("mask").style.backgroundImage = 'url("./images/mask-android.png")';
       document.getElementById("bg").style.visibility="visible";
     } else if(browserType && deviceType === 'iOS') {
       // 若是微信内置浏览器并且是苹果设备则弹出苹果遮罩
       document.getElementById("mask").style.backgroundImage = 'url("./images/mask-ios.PNG")';
       document.getElementById("bg").style.visibility="visible";
     } else {
       // 否则跳转Huawei Store
       window.location.href = huaweiDownloadUrl;
     }
   }

   // 弹出普通下载遮罩
   function _normalDownloadMask() {
     // 由于普通下载使用的a标签，所以遮罩层与a标签替换分开来
     if(browserType && deviceType === 'Android') {
       // 若是微信内置浏览器并且是安卓设备则弹出安卓遮罩
       document.getElementById("mask").style.backgroundImage = 'url("./images/mask-android.png")';
       document.getElementById("bg").style.visibility="visible";
     } else if(browserType && deviceType === 'iOS') {
       // 若是微信内置浏览器并且是苹果设备则弹出苹果遮罩
       document.getElementById("mask").style.backgroundImage = 'url("./images/mask-ios.PNG")';
       document.getElementById("bg").style.visibility="visible";
     }
   }

  // 初始化跳转
  init();

  // 获取路径后的资源地址
  function _getRequest() {
     if (typeof urlStr == "undefined") {
         var url = decodeURI(location.search); //获取url中"?"符后的字符串
     } else {
         var url = "?" + urlStr.split("?")[1];
     }
     var theRequest = new Object();
     if (url.indexOf("?") != -1) {
         var str = url.substr(1);
         strs = str.split("&");
         for (var i = 0; i < strs.length; i++) {
             theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
         }
     }
     return theRequest;
  }

   // 判断客户端
   function _judgeClient() {
    let client = '';
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
      client = 'iOS';
    } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
      client = 'Android';
    } else {
      client = 'PC';
    }
    return client;
  }

  // 判断浏览器是否为内置浏览器
  function _judgeBrowser() {
    var ua = navigator.userAgent.toLowerCase();
    let isWeixin = ua.indexOf('micromessenger') != -1;
    return isWeixin
  }

  // 切换头图
  function _changeImg() {
    let img = document.getElementById("guide-img")
    if(deviceType == 'iOS') {
      img.style.backgroundImage = 'url("./images/ios-top-img.jpeg")';
    } else if (deviceType == 'Android') {
      img.style.backgroundImage = 'url("./images/android-top-img.png")';
    }
  }

  // 初始化跳转下载地址
  function init() {
    if(browserType) {
      // 切换头图，IOS显示在<Safari中打开>，android显示在<在浏览器中打开>
      _changeImg();
    } else {
      // 隐藏头图和分隔栏
      document.getElementById("guide-img").style.visibility="hidden";
      document.getElementById("blur").style.visibility="hidden";
    }
    // 若初始化检测到设备为IOS则跳转商店，否则不变
    if(deviceType == 'iOS') {
      window.location.href = iosDownloadUrl;
    }
  }

  // 关闭遮罩层
  function _closeMask() {
    document.getElementById("bg").style.visibility="hidden";
  }

  // 点击ios下载
  function clickIosDownload () {
    _openIosStore();
  }

  // 点击华为商店下载
  function clickHuaWeiStoreDownload () {
    _openHuaweiStore();
  }

  // 普通下载
  function clickNormalStoreDownload () {
    _normalDownloadMask();
  }
</script>
</html>
